1 files changed, 5 insertions, 48 deletions
diff --git a/opendc-web/opendc-web-ui/src/pages/projects/[project]/topologies/[topology].js b/opendc-web/opendc-web-ui/src/pages/projects/[project]/topologies/[topology].js
index a1d6ac7e..f95b18ed 100644
--- a/opendc-web/opendc-web-ui/src/pages/projects/[project]/topologies/[topology].js
+++ b/opendc-web/opendc-web-ui/src/pages/projects/[project]/topologies/[topology].js
@@ -21,39 +21,28 @@
  */
 
 import { useRouter } from 'next/router'
+import TopologyOverview from '../../../../components/topologies/TopologyOverview'
 import { useProject } from '../../../../data/project'
-import { useDispatch, useSelector } from 'react-redux'
+import { useDispatch } from 'react-redux'
 import React, { useEffect, useRef, useState } from 'react'
-import { configure, HotKeys } from 'react-hotkeys'
-import { KeymapConfiguration } from '../../../../hotkeys'
 import Head from 'next/head'
 import { openProjectSucceeded } from '../../../../redux/actions/projects'
 import { AppPage } from '../../../../components/AppPage'
 import {
     Breadcrumb,
     BreadcrumbItem,
-    Bullseye,
     Divider,
-    Drawer,
-    DrawerContent,
-    DrawerContentBody,
-    EmptyState,
-    EmptyStateIcon,
     PageSection,
     PageSectionVariants,
-    Spinner,
     Tab,
     TabContent,
     Tabs,
     TabTitleText,
     Text,
     TextContent,
-    Title,
 } from '@patternfly/react-core'
 import BreadcrumbLink from '../../../../components/util/BreadcrumbLink'
-import MapStage from '../../../../components/topologies/map/MapStage'
-import Collapse from '../../../../components/topologies/map/controls/Collapse'
-import TopologySidebar from '../../../../components/topologies/sidebar/TopologySidebar'
+import TopologyMap from '../../../../components/topologies/TopologyMap'
 
 /**
  * Page that displays a datacenter topology.
@@ -75,11 +64,6 @@ function Topology() {
     const overviewRef = useRef(null)
     const floorPlanRef = useRef(null)
 
-    const topologyIsLoading = useSelector((state) => state.currentTopologyId === '-1')
-    const interactionLevel = useSelector((state) => state.interactionLevel)
-
-    const [isExpanded, setExpanded] = useState(true)
-
     const breadcrumb = (
         <Breadcrumb>
             <BreadcrumbItem to="/projects" component={BreadcrumbLink}>
@@ -94,13 +78,6 @@ function Topology() {
         </Breadcrumb>
     )
 
-    const panelContent = <TopologySidebar interactionLevel={interactionLevel} onClose={() => setExpanded(false)} />
-
-    // Make sure that holding down a key will generate repeated events
-    configure({
-        ignoreRepeatedEventsWhenKeyHeldDown: false,
-    })
-
     return (
         <AppPage breadcrumb={breadcrumb}>
             <Head>
@@ -134,7 +111,7 @@ function Topology() {
             </PageSection>
             <PageSection padding={activeTab === 'floor-plan' && { default: 'noPadding' }} isFilled>
                 <TabContent eventKey="overview" id="overview" ref={overviewRef} aria-label="Overview tab">
-                    Test
+                    <TopologyOverview topologyId={topologyId} />
                 </TabContent>
                 <TabContent
                     eventKey="floor-plan"
@@ -144,27 +121,7 @@ function Topology() {
                     className="pf-u-h-100"
                     hidden
                 >
-                    {topologyIsLoading ? (
-                        <Bullseye>
-                            <EmptyState>
-                                <EmptyStateIcon variant="container" component={Spinner} />
-                                <Title size="lg" headingLevel="h4">
-                                    Loading Topology
-                                </Title>
-                            </EmptyState>
-                        </Bullseye>
-                    ) : (
-                        <HotKeys keyMap={KeymapConfiguration} allowChanges={true} className="full-height">
-                            <Drawer isExpanded={isExpanded}>
-                                <DrawerContent panelContent={panelContent}>
-                                    <DrawerContentBody>
-                                        <MapStage />
-                                        <Collapse onClick={() => setExpanded(true)} />
-                                    </DrawerContentBody>
-                                </DrawerContent>
-                            </Drawer>
-                        </HotKeys>
-                    )}
+                    <TopologyMap />
                 </TabContent>
             </PageSection>
         </AppPage>